<template>
    <h2>用户借款还款</h2>
    <table class="table table-bordered">
        <tr>
            <td>借款款项名称</td>
            <td>{{Data.BM_Name }}</td>
        </tr>
        <tr>
            <td>最高借款金额</td>
            <td>{{Data.BM_Money }}CNY</td>
        </tr>
        <tr>
            <td>利息</td>
            <td>{{Data.BMI_Interest }}%</td>
        </tr>
        <tr>
            <td>借款金额</td>
            <td>{{ Data.UBM_Money }}CNY</td>
        </tr>
        <tr>
            <td>利息</td>
            <td>{{ }}CNY</td>
        </tr>
        <tr>
            <td>应还款(本+利)</td>
            <td>{{ }}CNY</td>
        </tr>
        <tr>
            <td>还款金额</td>
            <td>
                <input type="text">CNY
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <button>借款还款</button>
            </td>
        </tr>
    </table>

</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { ref, onMounted } from 'vue';
import axios from 'axios';

const route = useRoute();
const router = useRouter();

const Data=ref({
    BMI_Interest:0,
    BM_Id:0,
    BM_Money:0,
    BM_Name:'',
    UBM_Money:0
});

console.log(route.query.UBM_ID);
onMounted(() => {
    loadData();
})

//加载数据
const loadData = () => {
    axios.get('https://localhost:44387/api/Borrows/GetUserBorrowInfo', { params: { UBM_ID: route.query.UBM_ID } })

        .then(res => {
            console.log(res.data);
            Data.value = res.data[0];
        });
}


</script>